<script lang="ts" setup>
import { getPlayerAccountAlias } from '@/api/client/userApi'
import { Message } from '@arco-design/web-vue';
import { defineEmits, onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n';

const emit = defineEmits(['search']);

const { t } = useI18n()

const loading = ref(false)
const searchValue = ref('')
async function search(val) {
  try {
    const [gameName, tagLine] = val.split('#')
    loading.value = true
    const res = await getPlayerAccountAlias({ gameName, tagLine })
    if (Array.isArray(res) && res.length > 0) {
      const puuid = res[0].puuid
      if (puuid) {
        emit('search', puuid)
      } else {
        Message.error(t('SearchSummoner.NotFound'))
      }
      searchValue.value = ''
    }
    loading.value = false
  } catch (error) {
    console.log('error', error);
  }
}
</script>

<template>
  <div class="user_search ml-30px">
    <a-input-search v-model="searchValue" class="user_search_box w-240px" :placeholder="t(`SearchSummoner.placeholder`)"
      allow-clear :loading="loading" @keyup.enter.prevent="search" @search="search" />
  </div>
</template>

<style lang="scss" scoped>
.user_search {
  .user_search_box {
    border-radius: 10px;
  }
}
</style>
